<template>
    <div class="search">
        <div class="nav">
            <div class="nav-t">
                <div class="mav-l">
                    <select name="province" v-model="provinceId">
                        <option
                                v-for="(item,index) in province"
                                :value="index"
                                :key="index"
                        >{{item}}
                        </option>
                    </select>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-expandmore"></use>
                    </svg>
                </div>
                <div class="mav-l">
                    <select name="city" v-model="cityId">
                        <option v-for="(item,index) in city" :value="index" :key="index">{{item}}</option>
                    </select>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-expandmore"></use>
                    </svg>
                </div>
                <div class="mav-r" @click="sureSearch">
                    <p>确定</p>
                </div>
            </div>
            <div class="nav-b">
                <div class="nav-bl">
                    <p>省</p>
                    <p>市</p>
                    <p>区</p>
                </div>
                <div class="nav-br">
                    <p>状态</p>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="item-l">
                    <p>{{item.provincename}}</p>
                    <p>{{item.cityname}}</p>
                    <p>{{item.areaname}}</p>
                </div>
                <div class="item-r">
                    <p v-if="item.ishave === 0 && item.level == level " class="p2" @click="openArea(item)">申请</p>
                    <p v-else-if="item.ishave === 1">已存在代理商</p>
                    <p v-else>暂不支持开通功能</p>
                </div>
            </div>
            <confirm ref="confirm" :text="confirmText" cancelBtnText="取消" confirmText="确定"
                     @confirm="clearTrue"/>
        </div>
    </div>
</template>
<div>
</div>
<script>
    import API from '../../request/api';
    import Confirm from '@/components/common/confirm';

    export default {
        /**
         * 申请开通合伙人
         */
        name: "areaOpen",
        components: {Confirm},
        data() {
            return {
                province: [], // 省
                provinceId: '',
                cityId: '',
                city: [], // 市
                city2: [], // 市
                county: [], // 区
                province_list: [], // 省2
                city_list: [], // 市2
                county_list: [], // 区2
                list: [], // 列表数据
                cityOn: [], // 级联市
                level: this.$route.query.level,
                confirmText: '',
                item: {}
            };
        },
        created() {
            this.searchInit();
            this.getCitys();
        },
        methods: {
            getCitys() {
                // 获取省市区地址列表
                this.request
                    .get(API.getAllArea, {})
                    .then((res) => {
                        let area = res;
                        this.province = area.province_list; // 省
                        this.city = area.city_list; // 市
                        this.county = area.county_list; // 区
                        this.province[1] = '省份';
                        this.provinceId = '1';
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            searchInit() {
                // 初始化查询
                this.request.get(API.searchArea).then((res) => {
                    this.list = res.list;
                });
            },
            searchCity(id) {
                //    查询省对应的市
                this.request.get(API.searchAreaList, {province: id}).then((res) => {
                    this.city = res;
                    this.city[1] = '地级市';
                    this.cityId = '1';
                });
            },
            searchArea() {
                //    查询市对应的县的代理商情况
                this.request.get(API.searchArea, {
                    city: this.city[this.cityId],
                    province: this.province[this.provinceId]
                }).then((res) => {
                    this.list = res.list;
                });
            },
            searchProvince() {
                // 查询省对应代理商情况
                this.request.get(API.searchArea, {
                    province: this.province[this.provinceId]
                }).then((res) => {
                    this.list = res.list;
                });
            },
            sureSearch() {
                //    查询
                //    省份是否选择
                if (this.provinceId !== '1') {
                    // 省份已选择
                    if (this.cityId !== '1') {
                        //   所在市已选择
                        this.searchArea();
                    } else {
                        //   所在市未选择,直接查询对应省的
                        this.searchProvince();
                    }
                } else {
                    //    省份未选
                    this.searchInit();
                }

            },
            openArea(item) {
                //    申请开通代理
                // province	int	是	申请省市区
                // city	int	是	申请省市区
                // area	int	否	申请省市区
                // level	int	是	申请等级
                console.log(item, '撒啊实打实阿斯顿撒旦');
                let data = {};
                if (item.province && item.city && item.area) {
                    // 省市区都存在
                    data = {
                        province: item.province,
                        city: item.city,
                        area: item.area,
                        level: item.level,
                    };
                    this.request.post(API.openApply, data).then((res) => {
                        // 申请成功 res.status  1成功0不能申请
                        this.$toast(res.msg);
                        this.$router.push({
                            name: 'user'
                        });
                    });
                } else if (item.province && item.city) {
                    // 省市存在
                    if (item.level == 5) {
                        //    发请求查看提示语句是否不妥
                        this.request.post(API.verifyApply).then((res) => {
                            if (res.status == 1) {
                                //     弹窗选择
                                this.confirmText = '申请市代会取消您的区代身份，您确定要申请么？';
                            } else {
                                this.confirmText = '您确定要申请市级代理么？';
                            }
                            this.$refs.confirm.show();
                            this.item = item;
                        })
                    }

                } else {
                    this.$toast('暂不支持开通省级代理');
                }
            },
            clearTrue() {
                //    申请市代请求
                this.request.post(API.openApply, this.item).then((res) => {
                    if (res) {
                        this.$toast(res.msg);
                        // 申请成功,跳转推广
                        this.$router.push({
                            name: 'user'
                        });
                    }
                });
            }
        },
        watch: {
            provinceId(val) {
                if (val !== '1') {
                    // 先强控地级市
                    //    选择省份了. 把地级市数据换掉
                    this.searchCity(val);

                } else {
                    this.city = [];
                }
            }
        }

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .search {
        .nav {
            width 100vw
            height vw(104)
            background white
            position fixed
            top 0
            padding 0 cellPadding
            box-sizing border-box
            flex-y(flex-start)

            .nav-t {
                width 100%
                flex-x()
                padding-top 6vw

                .mav-l {
                    flex-x()
                    border 1px solid main-color
                    border-radius all-radius
                    width vw(120)
                    height vw(35)
                    padding 0 3vw
                    box-sizing border-box

                    .p1 {
                        word-vw(14px, gray3)
                    }

                    select {
                        -webkit-appearance: none;
                        -webkit-tap-highlight-color: #fff;
                        outline: 0;
                        height vw(28)
                        width 100%
                        background white
                    }
                }

                .mav-r {
                    width vw(77)
                    height vw(35)
                    background main-color
                    border-radius all-radius
                    flex-x(center)

                    p {
                        word-vw(14px, white)
                    }
                }
            }

            .nav-b {
                flex-x()
                width 100%
                height vw(42)

                .nav-bl {
                    flex-x()

                    p {
                        width 20vw
                        text-align center
                    }
                }

                .nav-br {
                    width 30vw

                    p {
                        text-align right
                    }
                }
            }
        }

        .list {
            width 100vw
            padding 0 4vw
            margin-top vw(104)
            background gray5
            box-sizing border-box
            flex-y()

            .item {
                height 10vw
                width 100%
                flex-x()

                .item-l {
                    flex-x()

                    p {
                        width 20vw
                        text-align center
                    }
                }

                .item-r {
                    width 30vw
                    flex-x(center)

                    .p2 {
                        color main-color
                        width vw(65)
                        border 1px solid main-color
                        text-align center
                        line-height vw(25)
                        border-radius all-radius
                    }
                }
            }
        }
    }
</style>
